<template>
  <div class="xmind-list-recents">
    <div class="trash-tip">文件夹和思维导图文件会保留30天，超过期限后会被永久删除</div>
    <CardGrid
      v-show="grid === 'card'"
      showFolder
      type="trash"
      :folderList="folderList"
      :mindList="mindList"
      :skeletonLoading="skeletonLoading"
      @folder-click="handleClickFolder"
      @refresh-page="handleResetSearchList" />

    <ListGrid
      v-show="grid === 'list'"
      type="trash"
      showFolder
      :folderList="folderList"
      :mindList="mindList"
      :skeletonLoading="skeletonLoading"
      @folder-click="handleClickFolder"
      @refresh-page="handleResetSearchList"  />
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, onBeforeUnmount, PropType } from 'vue'
import mitter from '@/mitt'
import { storeToRefs } from 'pinia'
import { commonStore } from '@/store/common.store'
import { apiGetFolderList, apiGetMindList, apiGetFolderTrashList, apiGetMindTrashList } from '@/apis/work'
import type { Folder, Mind } from '@/types'
import CardGrid from '@/pages/home/components/CardGrid.vue'
import ListGrid from '@/pages/home/components/ListGrid.vue'

defineProps({
  grid: {
    type: String as PropType<'card' | 'list'>,
    default: 'card'
  }
})

const { workBreadCrumbs } = storeToRefs(commonStore())
const setStaticBreadCrumb = commonStore().setStaticBreadCrumb
workBreadCrumbs.value = []
setStaticBreadCrumb({ title: '回收站', paramId: '' })

const searchKeywords = ref('')
const folderList = ref<Folder[]>([])
const mindList = ref<Mind[]>([])

const skeletonLoading = ref(false)
/**
 * 文件夹列表和导图列表数据信息查询
 */
const findTrashFolderMindList = async () => {
  skeletonLoading.value = true
  try {
    const data = await Promise.all(
      [
        apiGetFolderTrashList<Folder[]>({ name: searchKeywords.value }),
        apiGetMindTrashList<Mind[]>({ name: searchKeywords.value })
      ]
    )
    folderList.value = data[0]
    mindList.value = data[1]
    skeletonLoading.value = false
  } catch (error) {
    skeletonLoading.value = false
  }
}
findTrashFolderMindList()

const currnetFolderId = ref('')
/**
 * 查询文件夹下的子文件夹和导图列表
 */
const queryFolderAndMindList = async (folderId: string) => {
  currnetFolderId.value = folderId
  const data = await Promise.all(
    [
      apiGetFolderList<Folder[]>({ folderId, name: searchKeywords.value }),
      apiGetMindList<Mind[]>({ folderId, name: searchKeywords.value })
    ]
  )
  folderList.value = data[0]
  mindList.value = data[1]
}

const handleClickFolder = (folderItem: Folder) => {
  const { id, name } = folderItem
  queryFolderAndMindList(id)
  setStaticBreadCrumb({ title: name, paramId: id })
}

const handleResetSearchList = () => {
  if (currnetFolderId.value) {
    queryFolderAndMindList(currnetFolderId.value)
  } else {
    findTrashFolderMindList()
  }
}

mitter.on('search-mind-list', function (keywords?: any) {
  searchKeywords.value = keywords
  if (currnetFolderId.value) {
    queryFolderAndMindList(currnetFolderId.value)
  } else {
    findTrashFolderMindList()
  }
})

mitter.on('bread-crumb-click', function (breadCrumb: any) {
  const { paramId, title } = breadCrumb
  if (breadCrumb.paramId) {
    queryFolderAndMindList(paramId)
    setStaticBreadCrumb({ title, paramId })
  } else {
    currnetFolderId.value = ''
    findTrashFolderMindList()
    setStaticBreadCrumb({ title: '回收站', paramId: '' })
  }
})

onBeforeUnmount(() => {
  mitter.off('bread-crumb-click')
  mitter.off('search-mind-list')
})
</script>

<style lang="scss" scoped>
.xmind-list-recents {
  .trash-tip {
    line-height: 46px;
    color: #999;
    background-color: rgba(0,0,0,0.03);
    font-size: 12px;
    padding: 0 12px;
    border-radius: 6px;
    margin-bottom: 12px;
  }
}
</style>
